{% extends 'xadmin/base.html' %}
{% load staticfiles %}
{% load node_tag %}

{% block title %}
    站点管理
{% endblock %}

{% block style %}
    <style>
        #myTab {
            border-right: solid 1px #ddd;
        }
        #myTab .active {
            border-right: solid 2px #0000ff!important;
        }
        #myTab li{
            width:100%;
            border-left:none!important;
        }
        #myTab a{
            border: none;
            display: block;
            font-size:12px;
        }
        .myTab li:hover {border-right: solid 2px #0000ff!important;}
    </style>
{% endblock %}

{% block main %}
    <div class="col-sm-1 vertical-tab-box">
        <ul class="nav nav-tabs" aria-expanded="true" style="" id="myTab">
            <li class="active"  sign="basic-info"><a href="#basic-info">基本信息</a></li>
            <li sign="content-info"><a href="#content-info">角色</a></li>
        </ul>
    </div>
    <div class="col-sm-10">
        <form method="POST" class="layui-form" action="">
            {% csrf_token %}
            <div class="tab-content">
                <div class="tab-pane active" id="basic-info"  style="margin:40px;">
                    {% for field in user_form %}

                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 125px;">{{ field.label }}</label>
                                <div class="layui-input-block" style="margin-left:160px;">
                                    {{ field }}
                                    <span class="help-block m-b-none">{{ field.errors }}</span>
                                </div>
                            </div>

                    {% endfor %}
                </div>
                <div class="tab-pane" id="content-info">
                    <div class="form-group" style="margin:40px;">
                        {% for g in groups %}
                            <input type="checkbox" name="groups" value="{{ g.id }}" title="{{ g.name }}" lay-skin="primary" {{ user | isChecked:g.id }}>
                        {% endfor %}

                    </div>
                </div>
            </div>

            <div class="col-sm-4 col-sm-offset-2">
                <button class="btn btn-primary" type="submit">保存</button>
                <a class="btn btn-white" href="#" onclick="javascript:history.back(-1);">取消</a>
            </div>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'xadmin/ueditor/ueditor.config.js'%}"></script>
    <script src="{% static 'xadmin/ueditor/ueditor.all.js'%}"></script>
    <script>
      //tab切换
      $(function () {
        $('#myTab a:first').tab('show');//初始化显示哪个tab

        $('#myTab a').click(function (e) {
          e.preventDefault();//阻止a链接的跳转行为
          $(this).tab('show');//显示当前选中的链接及关联的content
        })
      });

      if($('#id_username').val() == 'admin'){
          //$('#id_username').attr('disabled', 'disabled');
          $('#id_username').attr('readonly', 'readonly');
      }

    </script>
{% endblock %}